<template>
	<view class="prizeDraw-main">
		<view class="prizeDraw-box">
			<view class="prizeDraw-brand">
				<image class="pointer" src="/static/prizeDraw/img_02.png" />
				<image class="turntable" src="/static/prizeDraw/img_01.png" :animation="move" />
			</view>
			<button class="but" @click="rotateBut">抽奖</button>
		</view>
		<view class="brand-box" @click="restoreFlip">
			<view :class="['brand',prizesTip=='未中奖'?'white':'red']" :animation="animationData">{{prizesTip}}
			</view>
		</view>
		<view class="container-main">
			<view class="container-box">
				<view class="container-title">中奖名单</view>
				<scroll-view scroll-y class="scroll-view" :scroll-top="scrollTop" @scroll="handleScroll">
					<view v-for="(item, index) in displayList" :key="index" class="winner-item">
						{{ item.name }} 中奖 {{ item.prize }}.
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		onMounted,
		nextTick
	} from 'vue'
	import {
		onShow,
		onLoad,
		onUnload
	} from '@dcloudio/uni-app';

	const winnerList = ref([{
			name: "张三",
			prize: "一等奖"
		},
		{
			name: "李四",
			prize: "二等奖"
		},
		{
			name: "王五",
			prize: "三等奖"
		},
		{
			name: "赵六",
			prize: "三等奖"
		},
		{
			name: "钱七",
			prize: "三等奖"
		},
		{
			name: "孙八",
			prize: "二等奖"
		},
	])
	const disable = ref(false)
	const move = ref()
	const resetFlag = ref(false)
	const prizesShow = ref(true)
	const animationData = ref()
	const prizesTip = ref()
	const prizes = ref({
		first: 5,
		second: 10,
		third: 20
	})

	let resetAnimation, mainAnimation, flipAnimation

	onLoad(() => {
		resetAnimation = uni.createAnimation({
			duration: 0
		});
		mainAnimation = uni.createAnimation({
			duration: 3000,
			timingFunction: 'ease'
		});
		flipAnimation = uni.createAnimation({
			duration: 2000,
			timingFunction: 'ease',
			transformOrigin: '50% 50%'
		});
		startAutoScroll()
	})
	onUnload(() => {
		stopAutoScroll()
	})
	const rotateBut = () => {
		if (disable.value) {
			uni.showToast({
				title: '正在抽奖中，请稍后...',
				icon: 'none',
				duration: 2000
			});
			return
		}
		disable.value = true
		const {
			first,
			second,
			third
		} = prizes.value
		const firstThreshold = first / 100
		const secondThreshold = firstThreshold + second / 100
		const thirdThreshold = secondThreshold + third / 100
		let probability = Math.random()
		let baseDeg
		if (probability < firstThreshold) {
			baseDeg = 60 + Math.random() * 60
		} else if (probability < secondThreshold) {
			baseDeg = 180 + Math.random() * 60
		} else if (probability < thirdThreshold) {
			baseDeg = 300 + Math.random() * 60
		} else {
			const unseeded = Math.random() * 144
			baseDeg = unseeded < 60 ? unseeded : unseeded < 120 ? 120 + (unseeded - 60) : 240 + (unseeded - 120)
		}
		const targetDeg = 1080 + baseDeg
		judge(targetDeg)
		resetAnimation.rotate(0).step()
		mainAnimation.rotate(targetDeg).step()
		resetFlag.value = !resetFlag.value
		move.value = resetAnimation.export()
		prizesShow.value = false
		nextTick(() => {
			setTimeout(() => {
				move.value = mainAnimation.export()
			}, 50)
		})
	}
	const judge = (num) => {
		const normalized = ((num % 360) + 360) % 360
		if (normalized >= 60 && normalized <= 120) {
			prizesTip.value = '一等奖'
		} else if (normalized >= 180 && normalized <= 240) {
			prizesTip.value = '二等奖'
		} else if (normalized >= 300 && normalized <= 360) {
			prizesTip.value = '三等奖'
		} else {
			prizesTip.value = '未中奖'
		}
		showFlipAnimation()
	}
	const showFlipAnimation = () => {
		setTimeout(() => {
			flipAnimation
				.scale(1)
				.rotateY(1080)
				.translate(0, -200)
				.step()
			prizesShow.value = false
			animationData.value = flipAnimation.export()
			disable.value = false
		}, 3000)
	}
	const restoreFlip = () => {
		const resetAnim = wx.createAnimation({
			duration: 100,
			timingFunction: 'linear'
		})
		resetAnim
			.scale(0)
			.rotateY(0)
			.translate(0, 0)
			.step()
		animationData.value = resetAnim.export()
	}
	const displayList = ref([...winnerList.value, ...winnerList.value])
	const scrollTop = ref(0)
	let scrollInterval = null
	const itemHeight = 50
	const startAutoScroll = () => {
		const totalHeight = winnerList.value.length * itemHeight
		let currentScroll = 0
		scrollInterval = setInterval(() => {
			currentScroll += 1
			if (currentScroll >= totalHeight) {
				currentScroll = 0
				scrollTop.value = 0
			} else {
				scrollTop.value = currentScroll
			}
		}, 50)
	}
	const stopAutoScroll = () => {
		if (scrollInterval) {
			clearInterval(scrollInterval)
			scrollInterval = null
		}
	}
</script>

<style lang="scss" scoped>
	.prizeDraw-main {
		height: 100vh;
		background: url('https://www.xingtucy.com/poster/back.jpg')left top no-repeat;
		background-size: 100% 100%;
		position: relative;
		padding-top: 50rpx;

		.prizeDraw-box {
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			margin-bottom: 50rpx;

			.prizeDraw-brand {
				padding: 30rpx;

				.pointer {
					width: 200rpx;
					height: 200rpx;
					position: absolute;
					z-index: 10;
					left: 370rpx;
					top: 364rpx;
					transform: translate(-50%, -50%);
				}

				.turntable {
					width: 600rpx;
					height: 600rpx;
					position: relative;
				}
			}

			.but {
				width: 400rpx;
				text-align: center;
				margin-top: 50rpx;
				background: rgb(230, 3, 3);
				color: #ffffff;
			}
		}

		.brand-box {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			z-index: 10;

			.brand {
				width: 400rpx;
				height: 500rpx;
				border-radius: 15rpx;
				text-align: center;
				line-height: 500rpx;
				font-size: 60rpx;
				font-weight: bold;
				border: 10rpx solid #fae20b;
				letter-spacing: 0.2em;
				box-shadow: 1rpx 1rpx 15rpx #00000040;
				transform: scale(0);
				transform-origin: center center;
			}

			.red {
				background: #e00303;
				color: #fae20b;
			}

			.white {
				background: #ffffff;
				color: #aaaaaa;
			}
		}

		.container-main {
			width: 100%;
			height: 200px;
			overflow: hidden;
			position: absolute;
			bottom: 20rpx;
			z-index: 5;
			padding: 0 30rpx;

			.container-box {
				background: #ffffffc9;
				border-radius: 15rpx;

				.container-title {
					text-align: center;
					padding: 15rpx 0;
					border-bottom: 1rpx solid #eee;
				}

				.scroll-view {
					height: 160px;

					.winner-item {
						height: 50px;
						line-height: 50px;
						text-align: center;
					}
				}
			}
		}
	}
</style>